<!--
  文件描述：无缝滚动组件
-->
<template>
<div class="content">
  <div class="mask"></div>
  <img class="img" src="../../static/chengjiao.png">
  <img class="close" src="../../static/roundclose.png" @click="close">
  <div class="box box1">
    <div class="box-span">
      <span>车型</span><span>上牌时间</span><span>公里数</span><span>成交时间</span>
    </div>
  </div>
  <div class="box box2">*数据来源益信车网数据系统</div>
  <div class="scroll-text">
    <vue-seamless-scroll :data="data" :class-option="defaultOption">
      <ul class="ul-scoll">
        <li v-for="(item, index) in data" :key="index">
          <span class="title">{{ item.car_des.substring(0,18) }}</span><span>{{ item.open_date }}</span><span>{{ item.mile }}</span><span class="date">{{ item.deal_date }}</span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'VueSeamlessScroll',
  components: {
    vueSeamlessScroll
  },
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    // 这里存放数据
    return {
    }
  },
  methods: {
    close () {
      this.$emit('close')
    }
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  }
}
</script>
<style scoped lang="less">
//@import url(); 引入公共css类
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  opacity: 0.7;
  z-index: 101;
}
.img {
  position: fixed;
  z-index: 109;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: 376px;
  height: 325px;
}
.box {
  width: 650px;
  position: fixed;
  z-index: 102;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #FDF6E8 0%, #FEF1CD 100%);
  border-radius: 8px;
}
.close {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 1100px;
  width: 60px;
  height: 60px;
  z-index: 108;
}
.box1 {
  height: 200px;
  top: 300px;
  font-size: 12px;
  .box-span {
    position: absolute;
    bottom: 20px;
    left: 0;
    display: flex;
    width: 100%;
    text-align: center;
    span:nth-child(1){
      flex: 1;
    }
    span:nth-child(2){
      width: 120px
    }
    span:nth-child(3){
      width: 100px
    }
    span:nth-child(4)  {
      width: 180px;
    }
  }
}
.box2 {
  height: 100px;
  line-height: 120px;
  top: 980px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #966131;
  text-align: center;
}
.scroll-text {
  width: 650px;
  height: 520px;
  background: linear-gradient(180deg, #FDF6E8 0%, #FEF1CD 100%);
  border-radius: 8px;
  overflow: hidden;
  position: fixed;
  z-index: 102;
  left: 50%;
  top: 480px;
  transform: translateX(-50%);
  .ul-scoll {
    padding: 0 20px;
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 60px;
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6B531C;
      text-align: center;
      span:nth-child(2){
        width: 120px
      }
      span:nth-child(3){
        width: 100px
      }
      span:nth-child(4)  {
        width: 180px;
      }
    }
  }
}
</style>
